<template>
  <el-card class="common-card reward-panel">
    <template #header>
      <div class="header">
        <div v-if="isList" class="operation">
          <el-button type="text" class="btn-edit" @click="showEditItem = true">新增</el-button>
          <el-button type="text" icon="el-icon-refresh" class="btn-edit" @click="requireRefresh" />
        </div>
        <div class="title" :style="{color:data.color}">
          <h2>{{ data.name }}</h2>
          <div class="description">{{ data.description }}</div>
        </div>
      </div>
    </template>
    <div v-if="!isList">
      <RewardRecordPanel v-for="panel in child_panel" :key="panel.id" :data="panel" />
    </div>
    <div v-else>
      <RewardList
        ref="rewardList"
        :data="data"
        :round.sync="round"
        @requireRefresh="requireRefresh"
      />
      <el-dialog :visible.sync="showEditItem">
        <Editor
          ref="rewardEdit"
          :data="data"
          :default-round="round"
          @requireUpdate="requireRefresh"
        />
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'RewardRecordPanel',
  components: {
    RewardList: () => import('../RewardRecord/List'),
    Editor: () => import('./Edit')
  },
  props: {
    data: { type: Object, default: null }
  },
  data: () => ({
    showEditItem: false,
    round: 0
  }),
  computed: {
    isList() {
      return !this.child_panel.length
    },
    child_panel() {
      return this.types.filter(i => i.children && i.children.length)
    },
    types() {
      const d = this.data
      return d.children
    }
  },
  mounted() {},
  methods: {
    requireRefresh() {
      this.showEditItem = false
      return this.$refs.rewardList.requireRefresh()
    },
    handleDelete(id) {
      this.$refs.rewardEdit.requireDelete(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.reward-panel {
  margin-top: 1rem;
  .header {
    height: 5rem;
    overflow-y: scroll;
  }
  .title {
    line-height: 15px;
    float: left;
  }
  .description {
    color: #ccc;
    font-size: 9px;
  }
  .operation {
    float: right;
    height: 0;
  }
  .btn-edit {
    transition: all 0.5s ease;
    width: 0;
    overflow: hidden;
  }
}
.common-card >>> {
  .el-card__header {
    padding: 0.5rem 0.5rem 0.1rem 0.5rem;
    word-break: break-all;
    transition: all 0.3s ease;
    border-left: 0.2rem solid rgb(15, 167, 255);
    white-space: pre-wrap;
    &:hover {
      box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
      border-left: 1rem solid rgb(15, 167, 255);
      .summary-content {
        color: #000;
      }
      .btn-edit {
        width: 3rem;
      }
    }
  }
}
</style>
